<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="">
    <div class="container1">
      <el-card class="mb-6">
        <span class="text-lg font-medium mb-3">模块简介：</span>
        <span class="text-gray-600 leading-relaxed mt-8">
          将国内外不同机构的气象数据（包括风速、风向、气压、气温、湿度）进行比较分析，分析其相对于均值场的均方根误差，分析不同产品的精度，根据偏差确定权重，对标准化的气象场数据进行加权平均，进行数据融合处理，最终生成北部湾气象场融合数据。
        </span>
      </el-card>
      <el-card class="mb-6">
        <div class="flex items-center justify-between">
          <span class="text-lg font-medium">对比分析程序</span>
          <div class="flex items-center space-x-4">
            <el-button
              :type="downloadStatus === 'running' ? 'danger' : 'primary'"
              class="!rounded-button whitespace-nowrap"
              size="small"
              @click="toggleDownload"
            >
              <i
                class="el-icon-video-play"
                v-if="downloadStatus !== 'running'"
              ></i>
              <i class="el-icon-video-pause" v-else></i>
              {{ downloadStatus === "running" ? "停止执行" : "开始执行" }}
            </el-button>
          </div>
        </div>
      </el-card>
      <el-card class="h-full">
        <el-tabs v-model="activeTab">
          <el-tab-pane
            label="要素图"
            name="chart"
            class="flex-1 flex flex-col h-full"
          >
            <div class="flex items-center justify-between mb-6">
              <div class="flex items-center space-x-6">
                <div class="flex items-center space-x-2">
                  <span class="text-gray-600">参数：</span>
                  <el-select v-model="selectedType" size="small">
                    <el-option
                      v-for="type in typeOptions"
                      :key="type"
                      :label="type"
                      :value="type"
                    />
                  </el-select>
                </div>
                <div class="flex items-center space-x-2">
                  <span class="text-gray-600">日期：</span>
                  <el-date-picker
                    size="small"
                    v-model="selectedDate"
                    type="date"
                    class="w-40"
                  />
                </div>
                <div class="flex items-center space-x-2">
                  <span class="text-gray-600">时间：</span>
                  <el-select v-model="selectedTime" size="small" class="w-100">
                    <el-option
                      v-for="time in timeOptions"
                      :key="time"
                      :label="time"
                      :value="time"
                    />
                  </el-select>
                </div>
              </div>
              <div class="flex items-center space-x-4">
                <el-button type="primary" @click="handleSearch" size="small">
                  <i class="el-icon-search"></i>查询
                </el-button>
                <el-button @click="handleReset" size="small">
                  <i class="el-icon-refresh"></i>重置
                </el-button>
              </div>
            </div>
            <!-- 图片预览区域 -->
            <div
              class="w-full aspect-[16/9] bg-gray-100 rounded-lg flex items-center justify-center mt-10 p-10"
              style="height: 60vh"
            >
              <div
                v-if="previewImage"
                class="w-full h-full flex items-center justify-center"
              >
                <img :src="previewImage" class="h-full" />
              </div>
              <div v-else class="text-center">
                <i class="el-icon-picture text-gray-400 text-6xl mb-4"></i>
                <p class="text-gray-500">暂无数据</p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="数据查看" name="download" class="flex-1">
            <!-- 文件列表 -->
            <div class="overflow-y-auto pr-2" style="height: 60vh">
              <iframe
                src="https://datastore.iocean.cn/era5_reanalysis/wind/"
                class="w-full h-full border-none rounded-lg bg-gray-50"
                title="ERA5数据文件目录"
                loading="lazy"
              ></iframe>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 50,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      activeTab: "chart",
      downloadStatus: "stopped",
      previewImage:
        "https://psl.noaa.gov/data/gridded/images/small/nceprean.png",
      selectedTime: "00",
      selectedType: "风速风向",

      selectedDate: new Date(),
      timeOptions: Array.from({ length: 24 }, (_, i) =>
        i.toString().padStart(2, "0")
      ),
      typeOptions: ["风速风向", "气压", "气温", "湿度"],

      files: Array.from({ length: 50 }, (_, index) => ({
        name: `ERA5_WindSpeed_${2023 - Math.floor(index / 12)}_${(
          (index % 12) +
          1
        )
          .toString()
          .padStart(2, "0")}.nc`,
      })),
    };
  },
  methods: {
    toggleDownload() {
      this.downloadStatus =
        this.downloadStatus === "running" ? "stopped" : "running";
    },
    handleSearch() {
      console.log("Search clicked");
    },
    handleReset() {
      this.selectedTime = "00";
      this.selectedType = "风速风向";
      this.selectedDate = new Date();
    },
  },
};
</script>

<style scoped>
.container1 {
  height: calc(100vh - 70px);
}

.el-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
